<template>
    <div class="children_content">
        <div class="add_btns_box">
            <div class="box_left">
                <div class="title">流程管理</div>
            </div>
            <div class="box_right">
                <Space>
                    <Button type="primary" @click="showAdd = true" icon="md-add">新增</Button>
                    <Button type="error" icon="ios-trash" @click="batchDel">批量删除</Button>
                    <Button type="primary" ghost icon="md-cloud-download">导出</Button>
                    <Button type="primary" ghost icon="md-cloud-upload">导入</Button>
                </Space>
            </div>
        </div>
        <div class="content_table">
            <vxe-table ref="tableRef" :data="tableData"  border="none" size="small" auto-resize stripe :min-height="50" :max-height="tableHeight + 'px'">
                <vxe-column type="checkbox" width="50" align="center"></vxe-column>
                <vxe-column title="流程名称" field="name"></vxe-column>
                <vxe-column title="操作" fixed="right" width="130" align="center">
                    <template #default="{ row, rowIndex }">
                        <div class="table_btns">
                            <text-btn @click="showEdit = true;rowData = row" />
                            <text-btn type="del" @click="delData(row, rowIndex)" />
                        </div>
                    </template>
                </vxe-column>
            </vxe-table>
            <div class="page_box">
                <Page :total="40" show-elevator show-sizer show-total />
            </div>
        </div>
    </div>
    <add v-if="showAdd" @submit="showAdd = false" @cancel="showAdd = false" />
    <edit v-if="showEdit" @submit="showEdit = false" @cancel="showEdit = false" :data="rowData" />
</template>

<script setup>
import { ref, getCurrentInstance, inject, watch } from 'vue';
import add from './add.vue';
import edit from "./edit.vue";

// 屏幕高度
const screenHeight = inject('screenHeight');
// 表格高度
const tableHeight = ref(0);
// 监听 screenHeight 的变化
watch(
    screenHeight,
    (newHeight) => {
        tableHeight.value = newHeight - 240;
    },
    { immediate: true }
);

// 当前对象
const { proxy } = getCurrentInstance();

// 是否显示新增
const showAdd = ref(false);
const showEdit = ref(false);
const rowData = ref(null);

const tableData = ref([
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
    { name: '请假流程' },
])

const tableRef = ref();

const exportCsv = () => {
    let $table = tableRef.value
    if ($table) {
        $table.exportData({
            type: 'csv'
        });
    }
}

// 批量删除 
const batchDel = () => {
    proxy.$Modal.confirm({
        mask: false,
        title: '警告',
        content: '<p>是否批量删除该数据?!</p>',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
            proxy.$Message.success('确认删除');
        }
    });
}

/**
 * 单个删除
 * @param {
 *  row: 选中行数据
 *  index: 当前数据下标
 * }
*/
const delData = (row, index) => {
    proxy.$Modal.confirm({
        mask: false,
        title: '警告',
        content: '<p>是否删除该数据?!</p>',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
            proxy.$Message.success('确认删除');
        }
    });
}
</script>